<template>
  <transition name="">
    <div class="store-describe">
      <v-header :title="this.$route.query.title" :fixed="true">
      </v-header>

      <scroll ref="scroll">
        <div :style="{height: height + 'px'}"></div>
        <div class="storeWrapper">
          <div class="storeAll" v-html="contentHTML" v-images-loaded="imageLoaded"></div>
          <div v-show="noDataWrapper" style="text-align: center; margin-top: 25%;" @click="getRefresh()">
            <h4>喔噢~，没有数据</h4>
            <p style="margin-top: 7px;">点击刷新</p>
          </div>
        </div>
      </scroll>
    </div>
  </transition>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import Scroll from '@/components/scroll/scroll'
import imagesLoaded from 'vue-images-loaded'
import axios from '@/api/axiosApi'
import { isIOS, isIphoneX } from '@/assets/js/brower'
import { Tab, TabItem } from 'vux'

export default {
  data () {
    return {
      contentHTML: '',
      styles: {},
      height: 0,
      noDataWrapper: false
    }
  },
  directives: {
    imagesLoaded
  },
  components: {
    VHeader, Scroll, Tab, TabItem, isIOS, isIphoneX
  },
  mounted () {
    this.$refs.scroll.$el.style.height = (window.innerHeight - this.$refs.scroll.$el.offsetTop) + 'px'
  },
  created () {
    this.isMarginTop()
    this._getDetail()
  },
  activated() {
    this._getDetail()
  },
  methods: {
    isMarginTop () {
      if (isIphoneX()) {
        this.height = 80
      } else {
        this.height = 70
      }
    },
    back () {
      this.$router.go(-1)
    },
    _getDetail () {
      this.$vux.loading.show({
        text: '加载中...'
      })
      axios.get(this, `/v1/contentDesc/${this.$route.params.contentId}`, null, (data) => {
        // 隐藏
        this.$vux.toast.hide()
        if (data !== null) {
          this.contentHTML = data.contentHtml
        } else {
          this.noDataWrapper = true
        }
        this.$nextTick(() => {
          const el = this.$el.querySelectorAll('video')
          if (el) {
            el[0].load()
          }
        })
        // 处理加载图片中不可滚动
        setTimeout(() => {
          this.$refs.scroll.scroll.refresh()
        }, 200)
      })
    },
    getRefresh () {
      this._getDetail()
    },
    imageLoaded(instance) {
      // 处理加载图片时不可滚动
      this.$vux.loading.hide()
      this.$refs.scroll.scroll.refresh()
    }
  }
}
</script>
<style lang="stylus">
.storeAll {
  img {
      width: 100%;
    }
}
</style>

<style lang="stylus" scoped>
  @import '~@/assets/css/variable.styl'
  .store-describe {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0px;
    padding-right 15px
    background-color: white;
    z-index: 101;
  }

.store {
    padding-top 5px
    background-color white
    padding-left 15px
    font-size $font-size-large
    color $color-theme
}

.storeAll {
    padding-left 15px
    font-size $font-size-desc
    background-color white
    color $color-text-2
}

.bottomDiv {
    height:90px;
    background-color: white
}
</style>
